import { fromHTML, waitFor } from '../../common';
import admBadge from '../assets/badges/adm.svg?raw';
import atmosBadge from '../assets/badges/atmos.svg?raw';
import hiresLosslessBadge from '../assets/badges/hires-lossless.svg?raw';
import losslessBadge from '../assets/badges/lossless.svg?raw';
import spatialBadge from '../assets/badges/spatial.svg?raw';
import { onAlbumRoute } from '../glue/routing';
import { getAlbum } from '../services';

// Reliably get album data for displaying quality badges.
onAlbumRoute(async () => {
	if (document.querySelector('.ame-album-badges-container')) return;

	const albumId = location.pathname.split('/')[4];
	const album = await getAlbum(albumId);
	if (!album) return;

	const refEl = await waitFor('.headings__metadata-bottom', '.description');
	if (!refEl) return;

	const audioTraits = album.attributes.audioTraits;
	if (album.attributes.isMasteredForItunes) audioTraits.push('adm');

	const containerEl = fromHTML(`<p class="ame-album-badges-container"></p>`);

	if (audioTraits.includes('lossless')) containerEl.innerHTML += losslessBadge;
	if (audioTraits.includes('hi-res-lossless')) containerEl.innerHTML += hiresLosslessBadge;
	if (audioTraits.includes('atmos')) containerEl.innerHTML += atmosBadge;
	if (audioTraits.includes('adm')) containerEl.innerHTML += admBadge;
	if (audioTraits.includes('spatial')) containerEl.innerHTML += spatialBadge;

	refEl.after(containerEl);
});
